<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <meta charset="utf-8">
    <title>商城注册</title>
<!--    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">-->
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .register-container {
            width: 400px;
            margin: 50px auto;
            padding: 30px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .register-title {
            text-align: center;
            color: #FF4200;
            font-size: 24px;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>

<div class="register-container">
    <h2 class="register-title">账户注册</h2>
    <form class="layui-form" lay-filter="registerForm">
        <!-- 账户 -->
        <div class="layui-form-item">
            <label class="layui-form-label">账户</label>
            <div class="layui-input-block">
                <input type="text" id="name" name="name" required lay-verify="required" placeholder="请输入账户，注册完成后不可更改" autocomplete="off" class="layui-input">
            </div>
        </div>

        <!-- 昵称 -->
        <div class="layui-form-item">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-block">
                <input type="text" id="nickname" name="nickname" required lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
            </div>
        </div>

        <!-- 手机号 -->
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="tel" name="telephone" required lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
        </div>

        <!-- 密码 -->
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" id="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>

        <!-- 确认密码 -->
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input type="password" id="confirmPassword" name="confirmPassword" required lay-verify="required" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>

        <!-- 提交按钮 -->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button lay-submit lay-filter="registerBtn" type="button" class="registerbtn layui-btn layui-btn-fluid" style="background-color: #FF4200">立即注册</button>
            </div>
        </div>
    </form>
</div>

<!--<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>-->
<script src="layui/layui.all.js"></script>
<script>
    const $ = layui.$;
    const layer = layui.layer;
    const form = layui.form;

    $(".registerbtn").click(function () {
        let password = $("#password").val();
        let confirmPassword = $("#confirmPassword").val();
        if(password !== confirmPassword){
            layer.alert('密码与确认密码不一致，请重新输入！', {icon: 2});
            return false; // 阻止表单提交
        }
        let reg=/^[a-zA-Z0-9]{6,16}$/;
        if(!reg.test(password)){
            layer.msg("密码必须是6-16位字符或数字");
            return false;
        }
        let telephone = $("input[name='telephone']").val();
        let regtel = /^[0-9]{11}$/;
        let regtel2 = /^[0-9]{7}$/;
        if((!regtel.test(telephone)) && (!regtel2.test(telephone))){
            layer.msg("手机号异常");
            return false;
        }
        let name = $("input[name='name']").val();
        $.ajax({
            url:"user/getbyname",
            data:{name:name},
            async:false,
            success:function (data) {
                console.log(data);
                if(data){
                    layer.msg("账户已被注册");
                    return false;
                }else{
                    let nickname = $("input[name='nickname']").val();

                    let user={};
                    user.name=name;
                    user.nickname=nickname;
                    user.password=password;
                    user.telephone=telephone;
                    $.ajax({
                        url:"user/new",
                        data:user,
                        async: false,
                        success: function (data) {
                            layer.confirm("注册成功，即将前往登陆界面", {icon: 6}, function (index) {
                                layer.closeAll();
                                location.href="shopping/login";
                            });
                        }
                    });
                }
            }
        })
    });

</script>

</body>
</html>
